<template>
  <div class="amr-audio" v-loading="startLoading">
    <div>{{position}}s / {{duration}}s</div>
    <div class="process-warp">
      <el-progress :percentage="process"></el-progress>
    </div>
    <div class="tools-warp">
      <el-button type="text" @click="startHandle" :disabled="isStart" v-show="!isStart">
        <em class="my-icon icon-play"></em>开始
      </el-button>
      <el-button
        type="text"
        @click="togglePauseResume"
        :disabled="!amr || !isStart"
        v-show="isStart"
      >
        <em class="my-icon icon-pause" v-show="!isPause"></em>
        <em class="my-icon icon-play" v-show="isPause"></em>
      </el-button>
      <el-button type="text" @click="stopHandle" :disabled="!amr || !isStart">
        <em class="my-icon icon-stop"></em>
      </el-button>
    </div>
    <!-- <div>开始：{{isStart}}, 暂停：{{isPause}}</div> -->

    <div v-show="isBroken" style="color: red">当前文件解码失败</div>

    <input type="file" accept=".amr" @change="changeHandle" style="display: none">
  </div>
</template>
<script>
// import { PUBLIC_PATH } from '@/constant'
const PUBLIC_PATH = '/'
export default {
  name: '',
  mixins: [],
  components: {},
  props: {
    src: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      startLoading: false,
      amr: null,
      duration: 0,
      position: 0,
      listenPlayingTimer: null,
      isStart: false,
      isPause: false,
      isBroken: false
    }
  },
  computed: {
    process() {
      if (this.duration === 0) {
        return 0
      } else {
        return Math.ceil((this.position / this.duration) * 100)
      }
    }
  },
  watch: {},
  methods: {
    startHandle() {
      if (this.amr) {
        this.amr.play()
        this.position = 0
        this.listenPlaying()
      } else {
        this.startLoading = true
        this.amr = new global.BenzAMRRecorder()
        const src = PUBLIC_PATH + 'assets/sound_record.amr' // 'assets/yuan.amr'
        console.log('*****', src)
        this.amr
          .initWithUrl(this.src || src)
          .then(() => {
            // console.log('play')
            this.startLoading = false
            this.duration = this.amr.getDuration()
            this.amr.play()
            this.position = 0
            this.listenPlaying()
          })
          .catch(() => {
            this.startLoading = false
            this.isBroken = true
            this.amr = null
          })

        if (!this.amr) return

        this.amr.onPause(() => {
          console.log('暂停')
          this.isPause = true
          this.removeListenPlaying()
        })
        this.amr.onResume(() => {
          console.log('继续')
          this.isPause = false
          this.listenPlaying()
        })
        this.amr.onPlay(() => {
          this.isStart = true
        })
        this.amr.onStop(() => {
          this.isStart = false
          this.isPause = false
          this.removeListenPlaying()
          this.position = this.duration
        })
      }
      /*
      fetch(this.src).then(res => {
        console.log(res)
        // console.log(res.blob())

        res.blob().then(blob => {
          console.log(blob)
          const amr = new BenzAMRRecorder()
          amr.initWithBlob(this.src).then(() => {
            console.log('play')
            amr.play()
          })
        })
      })
      */
    },
    togglePauseResume() {
      this.amr.pauseOrResume()
    },
    stopHandle() {
      this.amr.stop()
    },
    changeHandle(e) {
      console.log(e.target.files[0])
      const amr = new global.BenzAMRRecorder()
      console.log(amr, e.target.files[0])
      amr.initWithBlob(e.target.files[0]).then(() => {
        console.log('play')
        amr.play()
      })
    },
    listenPlaying() {
      this.listenPlayingTimer = setInterval(() => {
        this.position = this.amr.getCurrentPosition().toFixed(2)
        if (Math.floor(this.duration) === Math.floor(this.position)) {
          this.removeListenPlaying()
          this.position = this.duration
        }
      }, 50)
    },
    removeListenPlaying() {
      console.log('stop listen')
      clearInterval(this.listenPlayingTimer)
    }
  },
  created() {
    const BenzScript = document.querySelector('#BenzAMRRecorderScript')
    if (!BenzScript) {
      const fragment = document.createDocumentFragment()
      const script = document.createElement('script')
      script.setAttribute('src', `${PUBLIC_PATH}assets/outerjs/BenzAMRRecorder.min.js`)
      script.id = 'BenzAMRRecorderScript'
      fragment.appendChild(script)
      document.body.appendChild(fragment)
    }
  },
  mounted() {
    setTimeout(() => {
      console.log(global.BenzAMRRecorder)
    }, 500)
  },
  beforeDestory() {
    const BenzScript = document.querySelector('#BenzAMRRecorderScript')
    if (BenzScript) {
      document.body.removeChild(BenzScript)
    }
  }
}
</script>
<style lang="scss" scoped>
.amr-audio {
  .tools-warp {
    /deep/ .el-button {
      margin-right: 10px;
      color: #1890ff;
    }
  }
}
</style>